import React, { Component } from 'react'
import { Carousel } from 'antd-mobile'
import { myFetch } from '../utils'
import { NoticeDeatil } from './'

export default class Announcement extends Component {
  constructor() {
    super()
    this.dataTransfer = {}
    this.fetchNotice = this.fetchNotice.bind(this)
    this.state = {
      notices: [],
      noticeModal: false,
    }
  }
  componentDidMount() {
    this.fetchNotice()
  }
  render() {
    const { notices, noticeModal } = this.state
    return (
      <div>
        <Carousel
          dots={false}
          autoplay={true}
          infinite={true}
        >
          {
            notices.map(v => (
              <div
                key={v.ID}
                className={`rt-carousel-box`}
                onClick={() => {
                  this.dataTransfer = v
                  this.setState({
                    noticeModal: true,
                  })
                }}
              >
                <span className={`rt-notice`}>公告</span>
                <span>{v.Title}</span>
              </div>
            ))
          }
        </Carousel>
        <NoticeDeatil
          visible={noticeModal}
          data={this.dataTransfer}
          onClose={() => {
            this.setState({
              noticeModal: false,
            })
          }}
        />
      </div>
    )
  }
  fetchNotice() {
    myFetch(`/infos/notice/getlist`)
      .then(rs => {
        if (rs && rs.NoticeList && rs.NoticeList.length > 0) {
          const arr = rs.NoticeList
          // arr.forEach(v => {
          //   localStorage.setItem(`notice-${v.ID}`, JSON.stringify(v))
          // })
          this.setState({
            notices: arr,
          })
        }
      })
  }
}